<template>
    <div class="app">
        <!-- 主页搜索框 -->
        <div class="load">
            <h1>饿了么</h1>
            <van-search
            class="ipt"
            shape="round"
            background="rgb(39, 109, 229)"
            placeholder="输入商家，商品名称"
            @click="$router.push('/search')"
            />
            <!-- <input type="text" placeholder="输入商家，商品名称" @click="$router.push('/search')" left-icon="eye-o"> -->
        </div>
        <!-- 轮播图 -->
        <div class="banner">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in imgs" :key="index">
                <img v-lazy="image.bannerUrl" />
                </van-swipe-item>
            </van-swipe>
        </div>
            
        <!-- 商品区域 -->
    <div class="good">
        <h2>猜你喜欢</h2>
            <span v-for="(item,index) in List" :key="index" @click="dianji(index)" :class="{'active':active==index}">{{item}}</span>
        <div class="til">
            <span v-for="(item,index) in arr" :key="index">{{item}}</span>
        </div>
        <div class="big">
            <div class="good1" v-for="(item,index) in good" :key="index" @click="todetile(item)">
                <div class="left">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="right">
                    <h3>{{item.name}}</h3>
                    <p>
                        <span class="xing">★{{item.wmPoiScore/10}}</span>
                        <span>{{item.monthSalesTip}}</span>
                    </p>
                    <p>
                        <span>{{item.minPriceTip}}</span>
                        <span>{{item.deliveryTimeTip}}</span>
                    </p>
                         <span class="manjian" v-for="(item,index) in item.discounts2" :key="index">{{item.info}}</span>
                </div>
            </div>
        </div>
    </div>
</div>
  </template>
  
  <script>
  import {shopList} from '../../utils/service'
  import { banner_list } from '../../utils/service'
  export default {
        data(){
            return {
            active:0,
            List:["综合排序","距离最近","销量最高","筛选"],
            arr: ["年货节热卖", "津贴联盟", "满减优惠", "品质联盟"],
            good: [],
            imgs:[]
             }
        },
        mounted(){
            shopList().then((res)=>{
                this.good=res.data.list
                // console.log(res.data.list);
            })
            banner_list().then((res)=>{
                this.imgs=res.data.list
                // console.log(res.data.list)
            })
        },
        methods:{
            dianji(index) {
                    this.active = index;
                    if (index == 1) {
                this.good.sort(
                    (a, b) => {
                        return (a.dictance / 1 < b.dictance / 1 ? -1 : (a.dictance / 1 > b.dictance / 1) ? 1 : 0)
                    }
                )
            } else if (index == 2) {
                this.good.sort(
                    (a, b) => {
                        return (a.minPriceTip / 1 > b.minPriceTip / 1 ? -1 : (a.minPriceTip / 1 < b.minPriceTip / 1) ? 1 : 0)
                    }
                )
            }
        },
        todetile(item){
            this.$router.push('/detail/'+item.mtWmPoiId)
        }
            }
    }

  </script>
  
  <style lang="scss" scoped>
  .load {
      background: rgb(39, 109, 229);
      padding: 10px 15px;
      box-sizing: border-box;
    }
    h1 {
      font-size: 20px;
      color: #fff;
    }
    input {
      width: 100%;
      height: 28px;
      border: none;
      outline: none;
      text-align: center;
      font-size: 13px;
      border-radius: 22px;
      margin-top: 6px;
    }
    .banner  {
    width: 100%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    }
    img {
    width: 100%;
    height: 110px;
    border-radius: 10px;
    }
    .good {
    padding: 10px;
    box-sizing: border-box;
}
.list {
    width: 100%;
    height: auto;
    padding: 8px 10px;
    box-sizing: border-box;
}
.good>span {
    margin: 10px 15px;
    display: inline-block;
}
.big {
    padding-bottom: 50px;
}
span:nth-child(1){
    margin-left: 0;
}
.active {
    font-weight: bold;
    font-size: 17px;
}
.til {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 5px 6px;
}

.til span {
    display: inline-block;
    background: rgb(175, 170, 170);
    margin: 0 6px;
    text-align: center;
    font-size: 12px;
    line-height: 22px;
    color: #333;
    opacity: 0.7;
    border-radius: 6px;
    width: 21%;
    height: 22px;
}
.good1 {
    width: 100%;
    height: 120px;
    padding: 0 10px;
    display: flex;
    justify-content: left;
    box-sizing: border-box;
    margin-bottom: 14px;
}
.good1 .right {
    margin-left: 10px;
}

.good1 .right h3 {
    margin-bottom: 10px;
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.good1 .right .manjian {
    display: inline-block;
    border: 1px solid red;
    color: red;
    margin-right: 2px;
    font-size: 8px;
    padding: 2px;
    margin-top: 2px;
}

.good1 .right>p {
    display: flex;
    justify-content: space-between;
}

.good1 .right span {
    color: #999;
    font-size: 12px;
}

.good1 .right .xing {
    color: orange;
}

.good1 img {
    width: 97px;
    height: 97px;
}

.big {
    width: auto;
    height: auto;
}
  </style>